<script setup lang="ts">
import { computed } from "vue";
import { useTeaStore } from "../../store/teaStore.ts";

const teaStore = useTeaStore();
const props = defineProps({
  id: { type: Number, default: 0 }
});

const teaInfo = computed(() => teaStore.teaList.find(tea => tea.id === props.id));

</script>

<template>
  <div v-if="teaInfo" class="section">
    <h2 class="section-title"><br /></h2>
    <div class="breadcrumb">
      <span><RouterLink :to="{path:'/'}">首页</RouterLink></span>
      <span><RouterLink :to="{path:'/'}">产品中心</RouterLink></span>
      <span>{{ teaInfo.title }}</span>
    </div>
    <div class="tea-wrapper">
      <nav class="tea-nav">
        <RouterLink class="tea-nav-item" v-for="tea in teaStore.teaList" :to="{name: 'tea', params: {id: tea.id}}">
          {{ tea.title }}
        </RouterLink>
      </nav>
      <div class="tea-info-wrapper">
        <div class="tea-img">
          <img style="width: 100%; height: 100%;" :src="teaInfo.imgSrc" :alt="teaInfo.title" />
        </div>
        <div class="tea-info">
          <header class="tea-info-title">{{ teaInfo.title }}</header>
          <p class="tea-info-description">{{ teaInfo.description }}</p>
        </div>
      </div>
    </div>
  </div>
  <!-- 相应茶叶不存在 -->
  <div v-else class="no-exist-tea">
    <p>目标茶叶似乎遗忘在月球~</p>
  </div>
</template>

<style scoped>
/* 面包屑 start */
.breadcrumb {
  text-align: left;
  color: gray;
  padding-bottom: 2rem;
  font-size: 0.8rem;
}

.breadcrumb span:hover {
  color: black;
  cursor: pointer;
}

.breadcrumb span:after {
  content: '>';
  color: gray;
}

.breadcrumb span:last-child {
  color: black;
  cursor: default;
}

.breadcrumb span:last-child:after {
  content: '';
}

/* 面包屑 end */
.tea-nav, .tea-info-wrapper {
  border-radius: 24px;
  background: white;
}

.tea-nav {
  display: flex;
  text-align: left;
  flex-direction: column;
  width: 128px;
  overflow: hidden;
  flex-shrink: 0;
  padding: 1rem;
}

.tea-nav-item {
  text-indent: 1rem;
  height: 3rem;
  line-height: 3rem;
  transition: all 0.3s;
  border-radius: 12px;
}

.tea-nav-item:hover {
  background: var(--primary-color);
  color: white;
}

.tea-info-wrapper {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  flex-grow: 1;
}

.tea-img {
  width: 40%;
  height: 385px;
  border-radius: 24px;
  overflow: hidden;
}

.tea-info-title {
  font-size: 2rem;
  font-weight: bold;
}

.tea-info-description {
  font-size: 1rem;
}

.tea-info {
  text-align: left;
}

.tea-wrapper {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}

.no-exist-tea {
  font-size: 2rem;
  text-align: center;
}
</style>